<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏⼤厅</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/game_hall.css">
</head>

<body>
    <div class="nav">⽹络五⼦棋对战游戏</div>
    <!-- 整个⻚⾯的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直⽔平居中这样的位置的 -->
        <div>
            <!-- 展⽰⽤⼾信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <div id="match-button">开始匹配</div>
        </div>
    </div>
     <script src="./js/jquery.min.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"></script> -->
    <style>
        *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container {
    width: 100%;
    height: calc(100% - 50px);

    display: flex;
    align-items: center;
    justify-content: center;
}
html, body {
    height: 100%;

    background-image: url("../image/cat.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.nav {
    height: 50px;

    background-color: rgb(50, 50, 50);
    color: white;

    line-height: 50px;
    padding-left: 20px;
}

.login-container {
    width: 100%;
    height: calc(100% - 50px);

    display: flex;
    align-items: center;
    justify-content: center;
}

#screen {
    width: 400px;
    height: 200px;
    font-size: 20px;
    background-color: gray;
    color: white;
    border-radius: 10px;

    text-align: center;
    line-height: 100px;
}

#match-button {
    width: 400px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: orange;
    border: none;
    outline: none;
    border-radius: 10px;

    text-align: center;
    line-height: 50px;
    margin-top: 20px;
}

#match-button:active {
    background-color: gray;
}
    </style>
    <script>
        var ws_url = "ws://" + location.host + "/hall";
        var ws_hdl = null;

        //页面关闭时，关闭socket连接
        window.onbeforeunload = function () {
            ws_hdl.close();
        }
        
        //给按钮设置初始状态
        var button_flag = "stop";
        //给匹配按钮设置点击事件
        var bm = document.getElementById("match-button");
        bm.onclick= function () {
            if (button_flag == "stop") {
                //开始匹配
                var req = {
                    optype: "match_start"
                }
                ws_hdl.send(JSON.stringify(req));
            }
            else {
                //停止匹配
                var req = {
                    optype: "match_stop"
                }
                ws_hdl.send(JSON.stringify(req));
            }
        }


        //获取用户的信息
        function get_user_info() {
            $.ajax({
                url: "/info",
                type: "get",
                success: function (res) {
                    var info_html = "<p>" + "用户名: " + res.username + " 积分: " + res.score + "</br>"
                        + " 比赛场次: " + res.total_count + " 获胜场次: " + res.win_count + "</p>";
                    var screen_div = document.getElementById("screen");
                    screen_div.innerHTML = info_html;

                    ws_hdl = new WebSocket(ws_url);
                    ws_hdl.onopen = onopen;
                    ws_hdl.onclose = onclose;
                    ws_hdl.onerror = onerror;
                    ws_hdl.onmessage = onmessage;
                },
                error: function (xhr) {
                    alert("获取用户信息失败");
                    location.replace("/login.html");
                }
            })
        }
        function onopen() {
            console.log("websocket open!");
        }
        function onclose() {
            ws_hdl.close();
            console.log("websocket close!");
        }
        function onerror() {
            console.log("websocket error!");
        }
        function onmessage(evt) {
            var resp = JSON.parse(evt.data);
            if (resp.result == false) {
                alert(evt.data);
                location.replace("/login.html");
                return;
            }

            if(resp["optype"]=="hall_ready"){
                alert("进入游戏大厅");
            }else if (resp["optype"] == "match_success") {
                console.log("匹配成功,进入游戏房间");
                location.replace("/game_room.html");
                return;
            }else if (resp["optype"] == "match_start") {
                console.log("已进入匹配队列");
                button_flag = "start";
                bm.innerHTML = "匹配中...点击按钮停止匹配";
                return;
            }else if (resp["optype"]== "match_stop") {
                console.log("已退出匹配");
                button_flag = "stop";
                bm.innerHTML = "开始匹配";
                return;
            }else {
                location.replace("/login.html");
                return;
            }
        }
        get_user_info();
    </script>
</body>

</html>